<template>
  <!-- <u-sticky :bgColor="bgColor" :offsetTop="offsetTop" customNavHeight="0"> -->
    <u-tabs 
		:list="tabList" 
		:current="current"
		:activeStyle="{ color: '#000000',fontWeight:'bolder',fontSize:'36rpx' }"
		:inactiveStyle="{ color: '#000000',fontSize:'32rpx'}"
		:lineWidth="lineWidth"
		lineColor="#ff9900"
		lineHeight="7"
		:itemStyle="{ height: '80rpx','min-width':itemWidth+'rpx' ,'padding-right':'10rpx'}"
		:lineStyle="{
			width: `${lineWidth}px`,
			height: '7px', /* 也可以在这里设置，优先级高于lineHeight */
			zIndex: -1,   /* 核心修改：设置z-index */
			bottom: '2px', /* 微调位置，使其更美观 */
			padding:'0rpx'
		}"
		@change="changeTab"
	>
		<template v-slot:iconLocate>
			<view class="iconfont icon-your-icon">
				<u-icon class="image" name="map" color="#666" size="22" @click="onIcon('city')" ></u-icon>
			</view> 
		</template>
		<template v-slot:iconFilter>
			<view class="iconfont icon-your-icon">
				<u-icon class="image" name="list-dot" color="#666" size="22" @click="onIcon('city')" ></u-icon>
			</view> 
		</template>
	</u-tabs>
  <!-- </u-sticky> -->
</template>

<script>
    export default {
		props:{
			current:{ //	当前选中的index
				type:Number,
				default:0
			},
			bgColor:{ //	背景色
				type:String,
				default:''
			},
			tabList:{
				type:Array,
				default:()=>[]
			},
			offsetTop:{
				type:Number,
				default:0
			},
			lineWidth:{
				type:Number,
				default:45
			},
			itemWidth:{
				type:Number,
				default:40
			},
		},
        data() {
            return {
            }
        },
		methods: {
			changeTab(item){
				this.$emit('change',item.index)
				if(item.iconLocate){
					this.onIcon('city')
				}else if(item.iconFilter){
					this.onIcon('filter')
				}
			},
			onIcon(icon){
				this.$emit('onIcon',icon)
			}
		}
    }
</script>
<style lang="scss">
	.custom-tab {
	    display: flex;
	    align-items: center;
	    justify-content: space-between; /* 根据需要调整 */
	}
	 
	.iconfont {
	    margin-right: 5rpx; /* 根据需要调整 */
	}
	.icon-your-icon{
		width: 25rpx;
		.image{
			width: 100%;
		}
		
	}
	::v-deep .u-tabs__wrapper__nav__line{
		z-index: -1;
	}
	::v-deep .u-tabs__wrapper__nav__item{
		width: auto!important;
	}
	::v-deep .uni-scroll-view-content{
		display: flex;
		justify-content: center;
	}
	::v-deep .u-sticky{
		border-radius: 30rpx!important;
	}
	::v-deep .u-tabs__wrapper__nav__item{
		width: 100rpx;
	}
</style>
